<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
</head>

<body>
    <div class="header">仿站电商*商品列表<a href="../views/index.html" class="a3">回到首页</a></div>
    <div class="center">
        <button class="start">首页</button>
        <button class="up">上一页</button>
        <p class="p1">1 / 39</p>
        <button class="down">下一页</button>
        <button class="end">末页</button>
        <input type="text" value="1" class="in1">
        <button class="over">跳转</button>
        <select name="" id="" class="selected">
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24">24</option>
        </select>
    </div>
    <ul>
        <li><div class="imgs"><img src="" alt=""></div></div><p class="title">你发啊剪短发啊到付件阿帆啊发发 发生</p><p class="P1">1</p><p class="p2">1</p></li>
    </ul>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/http.js"></script>
    <script>
        let current = 1;
        let pagesize = 12;
        let ull=document.querySelector('ul')
        let star=document.querySelector('.start')
        let center=document.querySelector('.center')
        let up =document.querySelector('.up')
        let down =document.querySelector('.down')
        let end=document.querySelector('.end')
        let sele=document.querySelector('.selected')
        let in1=document.querySelector('.in1')
        let over=document.querySelector('.over')
        let p1=document.querySelector('.p1')
        let imm=document.querySelector('.imm')
        async function fn1() {
            let htmlstr=``;
            let {data}=await http.get('/goods/list', { params: { current, pagesize } });
            let pageTotal=data.total
            console.log({data})
            console.log(pageTotal)
            // let a={data}
            // let currentData=data.list.slice((current-1)*pagesize,current*pagesize)
            // console.log(currentData)
            data.list.forEach(function(items){
                htmlstr+=`<li><div class="imgs"><img id="${items.goods_id}" src="${items.img_big_logo}" alt="" class="imm"></div></div><p class="title">${items.title}</p><p class="P1">¥${items.current_price}</p><p class="p2">¥${items.price}</p></li>`
            })
            p1.innerHTML=`${current}&nbsp;/&nbsp;${pageTotal}`
            ull.innerHTML=htmlstr
            star.className= current==1?'start disable':'start';
            end.className= current==pageTotal?'end disable':'end';
            up.className= current==1?'up disable':'up';
            down.className= current==pageTotal?'end disable':'end';

            up.onclick=function(){
                if(current==1) return;
                current--;
                fn1()
            }
            down.onclick=function(){
                if(current==pageTotal) return;
                current++;
                fn1()
            }
            star.onclick=function(){
                current=1
                fn1()
            }
            end.onclick=function(){
                current=pageTotal
                fn1()
            }
            over.onclick=function(){
                if(in1.value<1||in1.value>pageTotal) alert('请重新输入');
                current=Math.floor(in1.value)
                console.log(current)
                fn1()
            }
            sele.onchange=function(){
                pagesize=sele.value
                current=1
                fn1()
            }
            ull.onclick=function({target}){
                console.log(target.id)
                localStorage.setItem('goods_id',target.id)
                location.href='./detail.html'
            }
            
        }
        fn1();
        
        // console.log(data.total)
        // ull.onload=function(){
        //     console.log(data)
        // }
        // ull.innerHTML=`
        
        // `
    </script>
    <!-- <script src="./detail.html"></script> -->
    <!-- <script src="../js/myAxios.js"></script> -->
    <!-- <script src="../js/index.js"></script> -->
</body>

</html>